<template>
	<view class="lease">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<!-- #endif -->
		<view class="headtop">
			<image :src="baseUrl + '/wximage/lease_top.png'"></image>
			<view class="nr">
				<view class="title">{{x_name}}</view>
				<view class="desc">租借确认</view>
			</view>
		</view>
		<view class="content">
			<view class="headtitle">
				{{attrindex==1?'普通宝':'快充宝'}}
			</view>
			<view class="biaoti">
				<view class="hengxian1"></view>
				<view class="title">{{stationInfo.stationinfo.name}}</view>
				<view class="hengxian2"></view>
			</view>
			<view class="guize">
				<view class="title">计费规则</view>
				<view class="desc" v-if="attrindex==1">
					{{stationInfo.billinginfo.danjia}}元/{{stationInfo.billinginfo.minute}}{{stationInfo.billinginfo.attr==1?'分钟':'小时'}}（不足{{stationInfo.billinginfo.minute}}{{stationInfo.billinginfo.attr==1?'分钟':'小时'}}按{{stationInfo.billinginfo.minute}}{{stationInfo.billinginfo.attr==1?'分钟':'小时'}}计费）租借{{stationInfo.billinginfo.mianfei}}分钟内免费（超出计入费用），日封顶{{stationInfo.billinginfo.dayconsume}}元
					总封顶{{stationInfo.billinginfo.maxmoney}}元，押金{{stationInfo.billinginfo.maxmoney}}元，支持免押服务。
				</view>
				<view class="desc" v-else>
					{{stationInfo.kbillinginfo.danjia}}元/{{stationInfo.kbillinginfo.minute}}{{stationInfo.kbillinginfo.attr==1?'分钟':'小时'}}（不足{{stationInfo.kbillinginfo.minute}}{{stationInfo.kbillinginfo.attr==1?'分钟':'小时'}}按{{stationInfo.kbillinginfo.minute}}{{stationInfo.kbillinginfo.attr==1?'分钟':'小时'}}计费）租借{{stationInfo.kbillinginfo.mianfei}}分钟内免费（超出计入费用），日封顶{{stationInfo.kbillinginfo.dayconsume}}元
					总封顶{{stationInfo.kbillinginfo.maxmoney}}元，押金{{stationInfo.kbillinginfo.maxmoney}}元，支持免押服务。
				</view>
			</view>
			<view class="guize clearfix" v-if="total > 0" @click="topage('/pages/user/coupons?type=' + attrindex)">
				<view class="title fl">优惠券</view>
				<view class="youhuiquan fr clearfix">
					<text class="fl" v-if="coupons_id == 0">{{total}}张可用</text>
					<text class="fl" v-else>{{jianmian}}</text>
					<image :src="baseUrl + '/wximage/lease_right.png'" class="fl"></image>
				</view>
			</view>
			<view class="guize clearfix" v-else @click="topage('/pages/user/guanzhu')">
				<view class="title fl">优惠券</view>
				<view class="youhuiquan fr clearfix">
					<text class="fl">领取优惠券</text>
					<image :src="baseUrl + '/wximage/lease_right.png'" class="fl"></image>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="fangshi1">
				<view class="right" @click="rent()">
					免押金租借
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="fangshi2">
				<view class="right" @click="rent()">
					<image :src="baseUrl + '/wximage/danye1zffen.png'"></image>
					<view class="name">芝麻信用丨免押金</view>
				</view>
			</view>
			<!-- #endif -->
			<view class="foot">
				<!-- #ifdef MP-WEIXIN -->
				<view class="zhifufen">
					<image :src="baseUrl + '/wximage/lease_zhifufen.png'"></image>
					<view class="name">微信支付分丨550分及以上优享</view>
				</view>
				<!-- #endif -->
				<view class="xieyi">
					<image :src="baseUrl + '/wximage/lease_xuanzhong.png'" v-if="xuanzhong == true"
						@click="xuanzhong = false"></image>
					<image :src="baseUrl + '/wximage/lease_wxuanzhong.png'" v-else @click="xuanzhong = true"></image>
					<view class="name">点击即同意<text
							@click="topage('/pages/lease/article_detail?id=2')">《充值说明》</text>、<text
							@click="topage('/pages/lease/article_detail?id=4')">《委托代扣授权书》</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				xuanzhong: true,
				stationInfo: {},
				qrcode: '',
				attrindex: '',
				x_name: '',
				total: 0,
				coupons_id: 0,
				coupons_user_id: 0,
				jianmian: '',
			}
		},
		onLoad(options) {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}

			//获取基本配置信息
			this.request({
				url: '/xcx/webconfig',
				data: {}
			}).then(res => {
				if (res.data.code == 200) {
					this.x_name = res.data.data.x_name;
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})

			// 获取可以使用的优惠券
			this.request({
				url: '/xcx/userscoupons',
				data: {
					user_id: uni.getStorageSync('user_id'),
					page: 1,
					pageSize: 10,
					activeIndex: 1,
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					this.total = res.data.data.total;
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})

			this.qrcode = options.qrcode;

			this.attrindex = options.attrindex;

			this.stationinfo();

		},
		onShow() {
			let that = this;

			uni.getStorage({
				key: 'coupons',
				success: function(res) {
					that.coupons_id = res.data.coupons_id;
					that.coupons_user_id = res.data.coupons_user_id;
					that.jianmian = res.data.jianmian;

					uni.removeStorage({
						key: 'coupons'
					})
				}
			})
		},
		methods: {
			rent() { //免押金租借请求
				var formData = {
					'qrcode': this.qrcode,
					'user_id': uni.getStorageSync('user_id'),
					'attrindex': this.attrindex,
					'coupons_id': this.coupons_id,
					'coupons_user_id': this.coupons_user_id,
				};

				//免押租借开始
				// #ifdef MP-WEIXIN
				this.request({
					url: '/lease/paymentmian',
					data: formData,
					method: "GET"
				}).then(res => {
					if (res.data.code == 200) {
						var wxdata = res.data.data.data;
						if (wx.openBusinessView) {
							wx.openBusinessView({
								businessType: 'wxpayScoreUse',
								extraData: {
									mch_id: wxdata.mch_id,
									package: wxdata.package,
									timestamp: Math.floor(Date.now() / 1000),
									nonce_str: this.generateRandomString(32),
									sign_type: 'HMAC-SHA256',
									sign: wxdata.sign
								},
								success(e) {
									if (e.extraData.appid == undefined || e.extraData.appid == null || e
										.extraData.appid == '') {
										console.log("用户点击了取消");
									} else {
										uni.redirectTo({
											url: '/pages/lease/progress?prepayid=' + wxdata
												.prepayid
										})
									}
								},
								fail(e) {

								},
								complete() {

								}
							});
						} else {
							//引导用户升级微信版本
							console.log("升级微信版本")
						}
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				})
				// #endif

				// #ifdef MP-ALIPAY
				this.request({
					url: '/alipay/paymentmian',
					data: formData,
					method: "GET"
				}).then(res => {
					if (res.data.code == 200) {
						var wxdata = res.data.data.data;
						var code = res.data.data.code;
						if(res.data.code == 200){
							my.tradePay({
								// 调用资金冻结接口（alipay.fund.auth.order.app.freeze），获取支付宝预授权参数
								orderStr: wxdata,
								success: res1 => {
									if (res1.resultCode == 9000) {
										uni.redirectTo({
											url: '/pages/lease/progress?prepayid=' + code
										})
									} else {
										// 支付不成功，具体原因看返回，去对照文档
										uni.reLaunch({
											url: '/pages/index/index'
										})
									}
								},
								fail: res1 => {
									console.error('调用 my.tradePay 失败: ', JSON.stringify(error));
								},
							});
						}
					}
				})
				// #endif
			},
			stationinfo() {
				var formData = {
					'qrcode': this.qrcode
				};
				//请求接口绑定该商户
				this.request({
					url: '/lease/stationinfo',
					data: formData,
					method: "GET"
				}).then(res => {
					if (res.data.code == 200) {
						this.stationInfo = res.data.data;
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				})
			},
			fanhui() {
				uni.navigateBack()
			},
			topage(url) {
				uni.navigateTo({
					url
				})
			},
			generateRandomString(length) {
				let result = '';
				const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

				for (let i = 0; i < length; i++) {
					result += characters.charAt(Math.floor(Math.random() * characters.length));
				}

				return result;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}

	.lease {
		width: 100%;
		margin: 0 auto;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: center;
				color: #333333;
				font-size: 32rpx;
			}

			.iconfont {
				position: absolute;
				top: 0;
				left: 14rpx;
				font-size: 44rpx;
			}
		}

		.headtop {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 90;

			image {
				width: 100%;
				height: 628rpx;
			}

			.nr {
				position: absolute;
				top: 290rpx;
				left: 42rpx;

				.title {
					font-size: 44rpx;
					color: #000000;
					font-weight: 700;
					margin-bottom: 20rpx;
				}

				.desc {
					font-size: 44rpx;
					color: #000000;
					font-weight: 700;
				}
			}
		}

		.content {
			width: 84%;
			position: absolute;
			top: 560rpx;
			left: 8%;
			z-index: 200;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 40rpx;
			padding: 0 30rpx 60rpx;

			.headtitle {
				width: 146rpx;
				margin: 0 auto;
				margin-top: 52rpx;
				height: 146rpx;
				text-align: center;
				line-height: 146rpx;
				font-size: 28rpx;
				color: #333333;
				box-shadow: inset 0px 0px 10px 1px #46FFB6;
				border-radius: 50%;
			}

			.biaoti {
				width: 380rpx;
				margin: 0 auto;
				text-align: center;
				position: relative;
				margin-top: 60rpx;

				.title {
					font-size: 32rpx;
					font-weight: 700;
					color: #000000;
				}

				.hengxian1 {
					width: 90rpx;
					height: 2rpx;
					border-radius: 2rpx;
					background: linear-gradient(90deg, rgba(239, 239, 239, 0), rgba(219, 219, 219, 1));
					position: absolute;
					top: 22rpx;
					left: 0;
				}

				.hengxian2 {
					width: 90rpx;
					height: 2rpx;
					border-radius: 2rpx;
					background: linear-gradient(90deg, rgba(219, 219, 219, 1), rgba(239, 239, 239, 0));
					position: absolute;
					top: 22rpx;
					right: 0;
				}
			}

			.guize {
				width: 100%;
				margin: 0 auto;
				padding: 0 10rpx;
				box-sizing: border-box;

				.title {
					font-size: 28rpx;
					color: #000000;
					font-weight: 700;
					margin-top: 40rpx;
				}

				.desc {
					font-size: 24rpx;
					color: #999999;
					line-height: 40rpx;
					margin-top: 20rpx;
				}

				.youhuiquan {
					margin-top: 40rpx;

					text {
						font-size: 28rpx;
						color: #ED7E55;
					}

					image {
						width: 32rpx;
						height: 32rpx;
						margin-top: 4rpx;
					}
				}
			}

			.tishi {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
				margin-top: 20rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
			}

			.fangshi {
				margin-top: 80rpx;

				.left {
					width: 48%;
					height: 92rpx;
					line-height: 92rpx;
					text-align: center;
					font-size: 36rpx;
					color: #08D8C2;
					font-weight: 600;
					box-shadow: inset 0px 0px 1px 1px #08D8C2;
					border-radius: 46rpx;
				}

				.right {
					width: 48%;
					height: 92rpx;
					line-height: 92rpx;
					text-align: center;
					font-size: 36rpx;
					color: #FFFFFF;
					font-weight: 600;
					background: linear-gradient(to bottom, #AFFFF7, #00D6C0);
					border-radius: 46rpx;
				}
			}

			.fangshi1 {
				margin-top: 80rpx;

				.right {
					width: 100%;
					height: 92rpx;
					line-height: 92rpx;
					text-align: center;
					font-size: 36rpx;
					color: #FFFFFF;
					font-weight: 600;
					background: linear-gradient(to bottom, #AFFFF7, #00D6C0);
					border-radius: 46rpx;
				}
			}
			
			.fangshi2{
				margin-top: 80rpx;
				
				.right {
					width: 100%;
					height: 92rpx;
					line-height: 92rpx;
					background: linear-gradient(to bottom, #AFFFF7, #00D6C0);
					border-radius: 46rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					
					image {
						width: 35rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
					
					.name{
						font-size: 36rpx;
						color: #FFFFFF;
						font-weight: 600;
					}
				}
			}
		}

		.foot {
			width: 100%;
			margin: 0 auto;
			text-align: center;
			margin-top: 50rpx;

			// #ifdef MP-ALIPAY
			.zhifufen {
				display: flex;
				justify-content: center;
				height: 40rpx;
				line-height: 40rpx;

				image {
					width: 35rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				.name {
					font-size: 24rpx;
					color: #999999;
				}
			}
			//#endif

			// #ifdef MP-WEIXIN
			.zhifufen {
				display: flex;
				justify-content: center;
				height: 52rpx;
				line-height: 52rpx;

				image {
					width: 52rpx;
					height: 52rpx;
					margin-right: 10rpx;
				}

				.name {
					font-size: 24rpx;
					color: #999999;
				}
			}

			//#endif

			.xieyi {
				display: flex;
				justify-content: center;
				height: 28rpx;
				line-height: 28rpx;
				margin-top: 20rpx;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 6rpx;
				}

				.name {
					font-size: 20rpx;
					color: #999999;

					text {
						font-size: 20rpx;
						color: #0CD9C4;
					}
				}
			}
		}
	}
</style>